<!--
 * @Author: 孙开源 && sunkaiyuan@namenode.cn
 * @Date: 2023-11-10 10:34:52
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-11-11 10:48:24
 * @Description: 
 * 
-->
<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="580" destroy-on-close @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
      <sk-tabs type="border-card">
        <el-tab-pane ref="tab" label="班次信息">
          <el-descriptions :column="2" border title="">
            <el-descriptions-item label-class-name="light-blue">
              <template #label>班次</template>
              <el-input v-model="form.name"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="light-blue">
              <template #label>考勤起始</template>
              <el-time-picker v-model="attendance_start" placeholder="考勤起始" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>考勤结束</template>
              <el-time-picker v-model="attendance_end" disabled placeholder="自动计算" />
            </el-descriptions-item>
            <el-descriptions-item label-class-name="light-blue">
              <template #label>时长</template>
              <el-input v-model="form.time" @keyup="timeChange"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>备注</template>
              <el-input v-model="form.remark"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane ref="tab" label="人员信息">
          <sc-VxeTable ref="xGrid1" :data="form.users" :tablecode="'comprehensive_shift_user'">
          </sc-VxeTable>
        </el-tab-pane>
      </sk-tabs>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
export default {
  emits: ["success", "closed"],
  components: { skDicSelect, skAutoChoose },
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      visible: false,
      isSaveing: false,
      attendance_start: null,
      attendance_end: null,
      //表单数据
      form: {
        attendance_start: null,
        attendance_end: null,
        time: 0,
        users: []
      },
      //验证规则
      rules: {
        name: [{ required: true, message: "请输入班次名" }],
      },
      //所需数据选项
    };
  },
  watch: {
    attendance_start(val) {
      this.form.attendance_start = this.$TOOL.dateFormat(val, "hh:mm:ss");
    },
    attendance_end(val) {
      this.form.attendance_end = this.$TOOL.dateFormat(val, "hh:mm:ss");
    },
  },
  mounted() {
  },
  methods: {
    timeChange() {
      this.attendance_end = new Date(this.form.time * 3600 * 1000 + this.attendance_start.getTime());
    },
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.isSaveing = true;
          this.$API.comprehensive.shift.save.post(this.form).then((res) => {
            if (res.code == 200) {
              this.$emit("success", this.form, this.mode);
              this.visible = false;
              this.$message.success("操作成功");
            }
          }).finally(() => {
            this.isSaveing = false;
          });
        }
      });
    },
    getInfo(id) {
      this.$API.comprehensive.shift.info.get({
        filter: [{ id: id }],
      }).then((res) => {
        if (res.code == 200) {
          this.attendance_start = new Date(this.$TOOL.SYS_DATE() + ' ' + res.data.attendance_start);
          this.attendance_end = new Date(this.$TOOL.SYS_DATE() + ' ' + res.data.attendance_end);
          this.form = res.data;
          this.timeChange();
        }
      }).finally(() => {
        this.digloading = false;
      });
    },
    //表单注入数据
    setData(data) {
      this.getInfo(data);
    },
  },
};
</script>

<style scoped></style>
